Ext.define('Inbox.view.inbox.FolderPanel', {
	extend : 'Ext.panel.Panel',
	alias : 'widget.folderPanel',

	animCollapse : true,
	layout : 'fit',
	title : 'Folders',

	initComponent : function() {
		Ext.apply(this, {
			items : this.createView()
		});
		
		this.addEvents('folderselect');
		
		this.callParent(arguments);
	},

	createView : function() {
		this.view = Ext.create('widget.dataview', {
			autoScroll: true,
			store: 'inbox.FolderStore',
			selModel:{
				mode: 'SINGLE',
				listeners: {
					scope: this,
					selectionchange: this.onSelectionChange
				}
			},
			listeners:{
				scope: this,
				viewready: this.onViewReady
			},
			trackOver: true,
			cls: 'folder-list',
			itemSelector: '.folder-list-item',
			overItemCls: 'folder-list-item-hover',
			tpl: '<tpl for="."><div class="folder-list-item"><i class="{icon}"></i> &nbsp;{title}</div></tpl>'
		});
		
		return this.view;
	},
	
	onSelectionChange: function(){
		var selected = this.getSelectedItem();
		if(selected){
			this.loadFolder(selected);
		}
	},
	
	getSelectedItem: function(){
		return this.view.getSelectionModel().getSelection()[0] || false;
	},
	
	loadFolder: function(rec) {
		if (rec) {
			this.fireEvent('folderselect', this, rec.get('title'), rec.get('url'));
		}
	},
	
	onViewReady: function(){
		this.view.getSelectionModel().select(this.view.store.first());
	}
});